<template>
  <div>
    <h3>border-radius 最简单的实现一个圆形的点击区域</h3>
    <div class="bg">
      <div class="box" @click="handle">
        我是可点击的圆 100*100px， 我是可点击的圆 100*100px
      </div>
    </div>

    <h4>解决文字在 border-radius文字溢出的场景</h4>
    <div class="fill-bg">
      <div class="box-test" @click="handle">
        我是一个圆 200*200px， 文字溢出了
      </div>
    </div>

    <hr />
    <h3>map + area 实现</h3>

    <img src="../../assets/eg_planets.jpg" border="0" usemap="#Map" />
    <map name="Map" id="Map">
      <!-- 指定点击区域 -->
      <area shape="circle" coords="180,139,14" alt="Venus" @click="showTips" />
    </map>

    <hr />
    <h3>纯js计算实现</h3>
    <div>
      数学计算公式 (X-圆心点x)^2 + (Y点 - 圆心点y)^2 = r^2 相等， 则是在圆上，
      大于则在圆外，小于则在圆内
    </div>
    <div>
      圆心位置： ({{ x }}, {{ y }}), 鼠标点击的 - 》({{ pointX }}, {{ pointY }})
    </div>
    <div>滚动条高度: {{ scrollTop }}</div>
    <div style="color: red">是否在圆内： {{ isCircleRange }}</div>
    <div class="box-3-wrapper" ref="box-3">
      <!-- 特意用2个并行的元素测试， 给 box-3绑定事件，测试边缘点击问题 -->
      <div class="box-3"></div>
      <div class="circle"></div>
      <div class="dot"></div>
    </div>

    <hr />
    <h3>svg实现</h3>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
      <circle
        @click="handle"
        cx="100"
        cy="50"
        r="40"
        stroke="black"
        stroke-width="2"
        fill="red"
      />
    </svg>
  </div>
</template>

<script>
export default {
  name: 'border-radius',
  data () {
    return {
      x: '',
      y: '',
      pointX: '',
      pointY: '',
      scrollTop: '',
      isCircleRange: ''
    }
  },
  mounted () {
    let containerEl = document.querySelector('.content-view')
    let box = this.$refs['box-3']
    // console.log(box.offsetParent) // body
    // 半径
    let r = 100
    // 找到圆心的位置
    let x
    let y

    // 由于上面的 img 我没有给定高， 当图片加载完毕以后， 页面触发了重绘， 所以在 mounted里面不能直接 去拿box.offsetTop ，值不准，缺的就是图片的高度
    // 要么给 img加一个定高
    window.onload = () => {
      x = box.offsetLeft + r
      y = box.offsetTop + r

      this.x = x
      this.y = y
    }

    let handle = (event) => {
      // 这里的滚动条不是body的滚动条，是子元素的滚动条，所以不能用 document.documentElement.scroolTop
      let scrollTop = containerEl.scrollTop
      this.scrollTop = scrollTop

      // console.log(event)
      // 鼠标点击的位置
      let pointX = event.clientX
      let pointY = event.clientY + scrollTop
      this.pointX = pointX
      this.pointY = pointY

      console.log('event.clientY', event.clientY, 'event.pageY', event.pageY)
      // Math.pow 平方
      // Math.sqrt 开根号

      let xiexian = Math.pow(Math.abs(pointX - x), 2) + Math.pow(Math.abs(pointY - y), 2)

      // 开根号
      let distance = Math.sqrt(xiexian)

      console.log('距离--》', distance, '和圆的半径对比', r)

      this.isCircleRange = distance < r ? '在圆形内' : '在圆形外'
    }

    document.addEventListener('click', handle, false)
  },
  methods: {
    handle () {
      alert(1)
    },
    showTips () {
      alert('你点击到一个圆形上了')
    }
  }
}
</script>
<style lang="less" scoped>
.bg {
  background: pink;
  width: 400px;
}
.box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: red;
  // padding添加的数值 = border-radius的值， 能避免文字溢出
  // 比较精确的的值 = boredrRadius - (borderRadius / 根号2)
  padding: 100px;
}

.fill-bg {
  width: 200px;
  background: green;
}
.box-test {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: pink;
  padding: 30px;
  box-sizing: border-box;
}

.box-3-wrapper {
  position: relative;

  .dot {
    position: absolute;
    left: 100px;
    top: 100px;
    transform: rotate(-50%, -50%);
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background: red;
    z-index: 10;
  }
}
.box-3 {
  width: 200px;
  height: 200px;
  background: red;
  margin-top: 50px;
}
.box-3-wrapper .circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  background: blueviolet;
  border-radius: 50%;
}
</style>